<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>作业管理 - 数据库教学系统</title>
  <link rel="stylesheet" href="/src/style.css">
  <link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
</head>
<body class="bg-gray-50">
  <div class="min-h-screen flex">
    <!-- 侧边栏 -->
    <aside class="w-64 bg-white shadow-md">
      <div class="p-4 border-b border-gray-200">
        <h2 class="text-xl font-bold text-gray-800">数据库教学系统</h2>
      </div>
      <nav class="p-4 space-y-2">
        <a href="/student/dashboard.html" class="nav-item flex items-center">
          <i class="fas fa-home mr-3"></i>我的课程
        </a>
        <a href="/student/lab.html" class="nav-item flex items-center">
          <i class="fas fa-flask mr-3"></i>实验环境
        </a>
        <a href="/student/assignments.html" class="nav-item active flex items-center">
          <i class="fas fa-tasks mr-3"></i>作业管理
        </a>
        <a href="/student/profile.html" class="nav-item flex items-center">
          <i class="fas fa-user mr-3"></i>个人资料
        </a>
      </nav>
    </aside>

    <!-- 主要内容区 -->
    <main class="flex-1 p-8">
      <div class="flex justify-between items-center mb-8">
        <h1 class="text-2xl font-bold text-gray-800">作业管理</h1>
        <div class="flex items-center space-x-4">
          <div class="relative">
            <input type="text" class="input pl-10" placeholder="搜索作业">
            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500">
              <i class="fas fa-search"></i>
            </span>
          </div>
          <select class="input">
            <option>全部课程</option>
            <option>数据库设计</option>
            <option>数据库系统概论</option>
            <option>数据库优化与管理</option>
          </select>
        </div>
      </div>

      <!-- 作业列表 -->
      <div class="card">
        <div class="overflow-x-auto">
          <table class="table">
            <thead>
              <tr>
                <th>作业名称</th>
                <th>所属课程</th>
                <th>截止日期</th>
                <th>状态</th>
                <th>成绩</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
              <tr>
                <td>
                  <div>
                    <div class="font-medium text-gray-800">SQL查询练习</div>
                    <div class="text-sm text-gray-500">完成10个查询题目</div>
                  </div>
                </td>
                <td>数据库系统概论</td>
                <td>2024-01-20</td>
                <td>
                  <span class="px-2 py-1 text-sm rounded-full bg-yellow-100 text-warning">待提交</span>
                </td>
                <td>-</td>
                <td>
                  <button class="btn btn-primary">提交作业</button>
                </td>
              </tr>

              <tr>
                <td>
                  <div>
                    <div class="font-medium text-gray-800">数据库设计报告</div>
                    <div class="text-sm text-gray-500">提交ER图和关系模式</div>
                  </div>
                </td>
                <td>数据库设计</td>
                <td>2024-01-25</td>
                <td>
                  <span class="px-2 py-1 text-sm rounded-full bg-blue-100 text-primary">已提交</span>
                </td>
                <td>待批改</td>
                <td>
                  <button class="btn btn-secondary">查看详情</button>
                </td>
              </tr>

              <tr>
                <td>
                  <div>
                    <div class="font-medium text-gray-800">性能优化分析</div>
                    <div class="text-sm text-gray-500">分析并优化给定查询</div>
                  </div>
                </td>
                <td>数据库优化与管理</td>
                <td>2024-01-15</td>
                <td>
                  <span class="px-2 py-1 text-sm rounded-full bg-green-100 text-success">已完成</span>
                </td>
                <td>95</td>
                <td>
                  <button class="btn btn-secondary">查看详情</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 分页 -->
        <div class="flex items-center justify-between mt-4">
          <div class="text-sm text-gray-700">
            显示 1 到 3，共 3 条记录
          </div>
          <div class="flex space-x-2">
            <button class="btn bg-gray-100 text-gray-700 hover:bg-gray-200" disabled>
              <i class="fas fa-chevron-left"></i>
            </button>
            <button class="btn bg-primary text-white hover:bg-blue-600">1</button>
            <button class="btn bg-gray-100 text-gray-700 hover:bg-gray-200" disabled>
              <i class="fas fa-chevron-right"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- 作业提交指南 -->
      <div class="card mt-8">
        <h2 class="text-xl font-bold text-gray-800 mb-6">作业提交指南</h2>
        <div class="space-y-4">
          <div class="flex items-start space-x-4">
            <div class="p-2 bg-blue-100 text-primary rounded">
              <i class="fas fa-info-circle"></i>
            </div>
            <div>
              <h3 class="font-semibold text-gray-800 mb-1">文件格式要求</h3>
              <p class="text-gray-600">请按照要求提交PDF或Word格式的文档，图片请打包成ZIP格式。</p>
            </div>
          </div>

          <div class="flex items-start space-x-4">
            <div class="p-2 bg-green-100 text-success rounded">
              <i class="fas fa-check-circle"></i>
            </div>
            <div>
              <h3 class="font-semibold text-gray-800 mb-1">提交规范</h3>
              <p class="text-gray-600">作业文件命名格式：学号_姓名_作业名称。请确保文件大小不超过20MB。</p>
            </div>
          </div>

          <div class="flex items-start space-x-4">
            <div class="p-2 bg-yellow-100 text-warning rounded">
              <i class="fas fa-exclamation-circle"></i>
            </div>
            <div>
              <h3 class="font-semibold text-gray-800 mb-1">注意事项</h3>
              <p class="text-gray-600">请在截止日期前提交作业，逾期提交可能会影响成绩。如有特殊情况请提前与老师沟通。</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>
</html>